<template>
  <div style="width: 100%;height: 100%;">
    <div id="main8" style="width: 100%;height: 100%;"></div>
  </div>
</template>
<script>
const echarts = require('echarts')
export default {
  name: '',
  components: {
  },
  data () {
    return {
    }
  },
  created () {
  },
  mounted () {
    this.drawChart()
  },
  methods: {
    // 获取今年所有月份数组集合
    getAllMounth (now) {
      var d = new Date(now.replace(/[^\d]/g, '/') + '/1')
      var result = [now]
      for (var i = 0; i < 11; i++) {
        d.setMonth(d.getMonth() - 1)
        var m = d.getMonth() + 1
        m = m < 10 ? '0' + m : m
        result.push(d.getFullYear() + '-' + m)
      }
      return result
    },
    drawChart () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = echarts.init(document.getElementById('main8'))
      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '系统年度使用走势',
          x: 'center'
        },
        tooltip: {},
        legend: {
          left: 'left'
        },
        xAxis: {
          data: this.getAllMounth('2020-12').reverse()
        },
        yAxis: {},
        series: [
          {
            name: '数量',
            type: 'line', // 图表类型
            data: [0, 0, 0, 144, 10, 56, 0, 0, 0, 0, 0, 0] // 图表数据
          }
        ]
      }
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
      // 根据窗口的大小变动图表
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>
<style lang="less" scoped>

</style>
